<template>
  <div class="propose guide-adorn">
    <v-header></v-header>
    <div class="hede">
        <div class="hedeA">
           <div class="images"> <img src="@/assets/images/news/GKPTA.png" alt=""></div>
          <div class="query">
            <div class="title">
              <h3>投诉建议</h3>
              <p>Complaints and suggestions</p>
            </div>
        </div>
        </div>
    </div>
      <div class="propose-fill">
        <div class="propose-fillA">
          <div class="propose-fillB">
            <el-form ref="form" :model="propose">
              <el-form-item label="联系方式：" prop="AD_CONTACT">
                <el-input v-model="propose.AD_CONTACT" clearable></el-input>
              </el-form-item>
              <el-form-item label="投诉类型：" prop="AD_TYPE" class="suggestion">
                <el-select v-model="propose.AD_TYPE" placeholder="请选择联系类型" clearable>
                  <el-option :label="item.label" :value="item.value" v-for="item of selectList" :key="item.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="投诉内容：" prop="AD_CONTACT" clearable>
                <el-input type="textarea" v-model="propose.AD_DETAILS" maxlength="300" clearable></el-input>
                <p class="limitLen">还剩{{limitLen}}字</p>
              </el-form-item>
            </el-form>
            <div class="propose-box">
              <div class="propose-btn" @click="proposeSubmit">提交</div>
            </div>
          </div>
        </div>
      </div>

    <!-- </div> -->
      <v-footer class="footer"></v-footer>
  </div>
</template>
<script>
import VHeader from '@/views/layout/header'
import VFooter from '@/views/layout/footer'
// import moment from 'moment'
import {complaintsSuggestions} from '@/request/api'
export default {
  components: {
    VHeader,
    VFooter
  },
  data() {
    return {
      dropSelect: false,
      selectText: '请选择',
      selectList: [
        {
          value: 'TS',
          label: '投诉'
        },
        {
          value: 'JY',
          label: '建议'
        }
      ],
      propose: {
        AD_CONTACT: '', // 联系方式
        AD_TYPE: '', // 类型
        AD_DETAILS: '', // 内容

      }
    }
  },
  methods: {
    dropSelectBtn() {
      this.dropSelect = !this.dropSelect
    },
    dropSelectItem(val) {
      this.propose.AD_TYPE = val
      this.selectText = this.selectList[val-1].title
      this.dropSelect = false
    },
    // 提交
    proposeSubmit() {
      console.log(1111)
      if (this.propose.AD_CONTACT ==='' ) {
        this.$message('手机号不能为空，请输入正确手机号后在提交')
        return false
      }
      if (!(/^1[3456789]\d{9}$/.test(this.propose.AD_CONTACT))) {
        this.$message('手机号有误请重新输入！')
        return false
      } 
      if(this.propose.AD_DETAILS.length <= 0) { 
        this.$alert('请输入内容后再提交')
        return false
      }
      if(this.propose.AD_TYPE == "") { 
        this.$alert('请选择后再提交')
        return false
      }
      console.log(this.propose.AD_CONTACT)
      complaintsSuggestions({
        csTel:this.propose.AD_CONTACT,
        csType:this.propose.AD_TYPE,
        csContent:this.propose.AD_DETAILS,
      }).then(msg_1=>{
        console.log(msg_1,11)
        if(msg_1.msg === "成功！") {
          this.$message({
          message: '提交成功！',
          type: 'success'
        });
        this.propose = {
            AD_COMPANYNAME: '',
            AD_CODE: '',
            AD_CONTACT: '',
            AD_TYPE: '',
            AD_DETAILS: ''
            }
        }else{
           this.$message.error('提交失败！');
        }
      })
    },
  },
  computed: {
    limitLen() {
      if(300 - this.propose.AD_DETAILS.length <= 0) {
        this.$message('最多可输入300个数字')
        return 0
      }
      return 300 - this.propose.AD_DETAILS.length
    }
  }
}
</script>
<style lang="scss" scoped>
.propose {
  background-position-y: 250px;
  display:flex;
  flex-direction: column;
  .hede{
    width: 100%;
   background:#F4F5F9;
   .hedeA{
     width: 80%;
     height: 380px;
      margin: 0 auto;
      position: relative;
      .images{
        width: 100%;
        height:100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .query{
        width: 100%;
        height: 60px;
        color: #fff;
        position: absolute;
        top: 85px;
        .title{
          position: absolute;
          left: 30px;
          width: 200px;
          height: 50px;
          h3{
              font-size: 27px;
              font-weight: 300;
          }
          p{
            font-size: 12px;
          }
        }
      }
   }
  }
  .footer{
    flex:  0 0 auto;
  }
}
.propose-fill {
  width: 100%;
  height: 380px;
  background: #F4F5F9;
  position: relative;
  .propose-fillA{
    width: 77%;
    height: 570px;
    position: absolute;
    top: -210px;
    left: 11.4vw;
    background: #fff;

    .propose-fillB{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column;
      margin-top: 152px;
    }
  }
  ::v-deep .el-form-item {
    width: 800px;
  }
   ::v-deep .el-input {
    width: 300px;
  }
   ::v-deep .el-textarea {
    width:688px;
    textarea {
      width: 100%;
      resize: none;
      height: 90px;
    }
  }
   ::v-deep .limitLen {
    font-size: 12px;
    color: #333333;
    line-height: 16px;
    margin: 15px 0;
    text-indent: 80px;
  }
}
.propose-box {
  padding-bottom: 60px;
  .propose-btn {
    width:250px;
    line-height:46px;
    background:#3024DB;
    border-radius:25px;
    color: white;
    font-size: 16px;
    text-align: center;
    margin-left: -323px;
    cursor: pointer;
  }
}

.suggestion .el-scrollbar__wrap{
overflow: scroll !important;
}
</style>